{% extends 'base/base.html' %}
{% load static %}

{% block title %}{{ box.name }} - 妙趣拾光锦盒{% endblock %}

{% block extra_css %}
<style>
    .box-detail-img {
        width: 100%;
        height: 400px;
        object-fit: cover;
        border-radius: 10px;
        box-shadow: 0 8px 20px rgba(163, 112, 247, 0.2);
    }
    
    .price-badge {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 1.2rem;
        padding: 10px 15px;
        border-radius: 25px;
        box-shadow: 0 4px 10px rgba(163, 112, 247, 0.2);
        background: linear-gradient(135deg, #a370f7, #ff6b8b);
    }
    
    .price-original {
        text-decoration: line-through;
        color: #6c757d;
        font-size: 1.1rem;
    }
    
    .market-logo {
        width: 50px;
        height: 50px;
        object-fit: cover;
        border-radius: 50%;
        margin-right: 15px;
        border: 2px solid #d6b7ff;
    }
    
    .star-rating {
        color: #ffb6c9;
    }
    
    .draw-section {
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 10px;
        padding: 20px;
        margin-top: 30px;
    }
    
    .counter {
        font-size: 3rem;
        font-weight: bold;
        color: #a370f7;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    .counter-label {
        font-size: 0.9rem;
        color: #6c757d;
    }
    
    .review-avatar {
        width: 50px;
        height: 50px;
        object-fit: cover;
        border-radius: 50%;
        border: 2px solid #ffcfe0;
    }
    
    .animation-container {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.8);
        z-index: 9999;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    
    .recommended-box-img {
        height: 120px;
        object-fit: cover;
        border-radius: 8px;
    }
    
    .tab-content {
        background-color: rgba(255, 255, 255, 0.9);
    }
    
    .nav-tabs .nav-link.active {
        background: linear-gradient(135deg, #d6b7ff, #ffcfe0);
        border-color: #d6b7ff;
        color: #333;
        font-weight: bold;
    }
    
    .container {
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 15px;
        padding: 20px;
        box-shadow: 0 5px 15px rgba(163, 112, 247, 0.1);
    }
</style>
{% endblock %}

{% block content %}
<!-- 盲盒详情 -->
<div class="container mt-5">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'blindbox:index' %}">首页</a></li>
            <li class="breadcrumb-item"><a href="{% url 'blindbox:list' %}">盲盒商城</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ box.name }}</li>
        </ol>
    </nav>
    
    <div class="row mt-4">
        <!-- 盲盒图片 -->
        <div class="col-lg-5 position-relative mb-4 mb-lg-0">
            <img src="{{ box.image_url }}" alt="{{ box.name }}" class="box-detail-img">
            {% if box.has_discount %}
                <span class="badge bg-danger price-badge">
                    立省{{ box.discount_percentage }}%
                </span>
            {% endif %}
        </div>
        
        <!-- 盲盒信息 -->
        <div class="col-lg-7">
            <h1 class="mb-3">{{ box.name }}</h1>
            
            <!-- 价格信息 -->
            <div class="mb-4">
                {% if box.discount_price %}
                    <h2 class="text-danger mb-0">¥{{ box.discount_price }}</h2>
                    <span class="price-original">¥{{ box.original_price }}</span>
                {% else %}
                    <h2 class="text-danger">¥{{ box.original_price }}</h2>
                {% endif %}
            </div>
            
            <!-- 基本信息 -->
            <div class="mb-4">
                <div class="row mb-2">
                    <div class="col-md-4">
                        <span class="text-muted">分类:</span>
                    </div>
                    <div class="col-md-8">
                        {{ box.category|default:"未分类" }}
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col-md-4">
                        <span class="text-muted">库存:</span>
                    </div>
                    <div class="col-md-8">
                        {% if box.stock > 10 %}
                            <span class="text-success">充足 ({{ box.stock }})</span>
                        {% elif box.stock > 0 %}
                            <span class="text-warning">仅剩 {{ box.stock }} 个</span>
                        {% else %}
                            <span class="text-danger">已售罄</span>
                        {% endif %}
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col-md-4">
                        <span class="text-muted">有效期至:</span>
                    </div>
                    <div class="col-md-8">
                        {{ box.expiry_date|date:"Y年m月d日" }}
                    </div>
                </div>
        
                
                {% if market %}
                <div class="mt-4">
                    <h5>所属超市</h5>
                    <div class="d-flex align-items-center p-3 bg-light rounded">
                        <img src="{{ market.image_url }}" alt="{{ market.name }}" class="market-logo">
                        <div>
                            <h6 class="mb-0">{{ market.name }}</h6>
                            <div class="star-rating">
                                {% for i in "12345"|make_list %}
                                    {% if forloop.counter <= market.rating %}
                                    <i class="fas fa-star"></i>
                                    {% else %}
                                    <i class="far fa-star"></i>
                                    {% endif %}
                                {% endfor %}
                                <span class="ms-1 text-muted">({{ market.rating }})</span>
                            </div>
                            <small class="text-muted">{{ market.address }}</small>
                        </div>
                    </div>
                </div>
                {% endif %}
            </div>
            
            <!-- 抽盒按钮 -->
            <div class="mb-4">
                <div class="row g-2">
                    <div class="col-md-8">
                        <form id="buyForm" method="post" action="{% url 'shopping:add_to_cart' %}">
                            {% csrf_token %}
                            <input type="hidden" name="box_id" value="{{ box.box_id }}">
                            <input type="hidden" name="quantity" value="1">
                            <input type="hidden" name="redirect_to_checkout" value="1">
                            <div class="d-grid">
                                <button class="btn btn-primary btn-lg" type="submit" {% if box.stock < 1 %}disabled{% endif %}>
                                    <i class="fas fa-shopping-bag me-2"></i> 立即购买
                                </button>
                            </div>
                        </form>
                    </div>
                    <div class="col-md-4">
                        <form action="{% url 'shopping:add_to_cart' %}" method="post" class="d-grid">
                            {% csrf_token %}
                            <input type="hidden" name="box_id" value="{{ box.box_id }}">
                            <input type="hidden" name="quantity" value="1">
                            <button class="btn btn-outline-primary btn-lg" type="submit" {% if box.stock < 1 %}disabled{% endif %}>
                                <i class="fas fa-cart-plus me-2"></i> 加入购物车
                            </button>
                        </form>
                    </div>
                </div>
                <small class="text-muted text-center mt-2 d-block">点击购买或加入购物车即表示同意<a href="{% url 'blindbox:agreement' %}">《盲盒购买协议》</a></small>
            </div>
            
            <!-- 数据统计 -->
            <div class="row text-center">
                <div class="col-4">
                    <div class="counter">{{ box.sales }}</div>
                    <div class="counter-label">已售出</div>
                </div>
                <div class="col-4">
                    <div class="counter">{{ content_count }}</div>
                    <div class="counter-label">种内容物</div>
                </div>
                <div class="col-4">
                    <div class="counter">{{ reviews|length }}</div>
                    <div class="counter-label">条评价</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 详细描述 -->
    <div class="row mt-5">
        <div class="col-12">
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="description-tab" data-bs-toggle="tab" data-bs-target="#description" type="button" role="tab">详细描述</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="reviews-tab" data-bs-toggle="tab" data-bs-target="#reviews" type="button" role="tab">用户评价</button>
                </li>
            </ul>
            <div class="tab-content p-4 border border-top-0 rounded-bottom" id="myTabContent">
                <!-- 描述内容 -->
                <div class="tab-pane fade show active" id="description" role="tabpanel" aria-labelledby="description-tab">
                    <div class="mb-4">
                        <h4>商品描述</h4>
                        <p>{{ box.description|linebreaks|default:"暂无详细描述" }}</p>
                    </div>
                    
                    <div class="mb-4">
                        <h4>开盒说明</h4>
                        <div class="alert alert-info">
                            <p><i class="fas fa-info-circle me-2"></i> 盲盒商品为随机发放，每个盲盒内的商品都是由超市精心挑选的优质商品。</p>
                            <p><i class="fas fa-info-circle me-2"></i> 每个盲盒都有{{ content_count }}种可能的商品，具体获得哪种完全随机。</p>
                            <p><i class="fas fa-info-circle me-2"></i> 购买成功后，可前往超市凭订单二维码到超市自取。</p>
                        </div>
                    </div>
                </div>
                
                <!-- 评价内容 -->
                <div class="tab-pane fade" id="reviews" role="tabpanel" aria-labelledby="reviews-tab">
                    <h4 class="mb-4">用户评价 ({{ reviews|length }})</h4>
                    
                    {% if reviews %}
                        {% for review in reviews %}
                        <div class="mb-4 pb-4 border-bottom">
                            <div class="d-flex mb-3">
                                <img src="{{ review.icon|default:'/static/images/default-avatar.png' }}" alt="{{ review.username }}" class="review-avatar me-3">
                                <div>
                                    <h6 class="mb-0">{{ review.username }}</h6>
                                    <div class="star-rating">
                                        {% for i in "12345"|make_list %}
                                            {% if forloop.counter <= review.star_rating %}
                                            <i class="fas fa-star"></i>
                                            {% else %}
                                            <i class="far fa-star"></i>
                                            {% endif %}
                                        {% endfor %}
                                    </div>
                                    <small class="text-muted">{{ review.create_time|date:"Y-m-d H:i" }}</small>
                                </div>
                            </div>
                            <p>{{ review.content }}</p>
                            
                            {% if review.images %}
                            <div class="review-images">
                                <div class="row">
                                    {% for image in review.images %}
                                    <div class="col-2">
                                        <img src="{{ image }}" alt="评价图片" class="img-fluid rounded">
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                            {% endif %}
                            
                            <div class="text-end">
                                <button class="btn btn-sm btn-outline-secondary">
                                    <i class="far fa-thumbs-up me-1"></i> 点赞 ({{ review.like_count }})
                                </button>
                            </div>
                        </div>
                        {% endfor %}
                    {% else %}
                        <div class="text-center py-5">
                            <p class="text-muted">暂无评价</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    
    <!-- 推荐盲盒 -->
    {% if recommended_boxes %}
    <div class="mt-5">
        <h3 class="mb-4">猜你喜欢</h3>
        <div class="row">
            {% for rec_box in recommended_boxes %}
            <div class="col-md-3 mb-4">
                <div class="card h-100 border-0 shadow-sm box-card">
                    <img src="{{ rec_box.image_url }}" class="recommended-box-img" alt="{{ rec_box.name }}">
                    <div class="card-body">
                        <h5 class="card-title">{{ rec_box.name }}</h5>
                        <div class="d-flex justify-content-between align-items-center mt-2">
                            <div>
                                {% if rec_box.discount_price %}
                                <span class="text-danger">¥{{ rec_box.discount_price }}</span>
                                <small class="text-muted text-decoration-line-through">¥{{ rec_box.original_price }}</small>
                                {% else %}
                                <span class="text-danger">¥{{ rec_box.original_price }}</span>
                                {% endif %}
                            </div>
                            <a href="{% url 'blindbox:detail' box_id=rec_box.box_id %}" class="btn btn-sm btn-outline-primary">查看</a>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}
</div>

<!-- 抽盒动画容器 -->
<div id="drawAnimationContainer" class="animation-container">
    <div class="draw-animation">
        <div class="box-3d">
            <div class="box-face box-front">?</div>
            <div class="box-face box-back">?</div>
            <div class="box-face box-right">?</div>
            <div class="box-face box-left">?</div>
            <div class="box-face box-top">?</div>
            <div class="box-face box-bottom">?</div>
        </div>
    </div>
    <div class="animation-text">开启中...</div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 注意：这里删除了抽盒的动画触发逻辑，因为我们现在是直接购买，开盒动画会在订单完成后进行
    });
</script>
{% endblock %} 